<template>
  <div>
    <el-form
      ref="form"
      label-position="top"
      :model="container"
      :disabled="readonly"
    >
      <k-section
        :title="$t('business.workload.commands')"
        type="simple"
        description="使用英文(,)分割"
      >
        <el-input
          v-model="inputCmd"
          type="textarea"
          @change="onInputCmdChanged"
        />
      </k-section>

      <k-section
        :title="$t('business.workload.arguments')"
        type="simple"
        description="使用英文(,)分割"
      >
        <el-input
          v-model="inputArg"
          type="textarea"
          @change="onInputArgChanged"
        />
      </k-section>
      <k-section collapse type="simple">
        <template #head-action>
          <div class="w-full text-right text-slate-500">更多设置</div>
        </template>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.workload.working_dir')"
              prop="workingDir"
            >
              <ko-data-item
                v-model="container.workingDir"
                class="w-full"
                placeholder="e.g. /myapp"
                itemType="input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('business.workload.stdin')" prop="stdin">
              <ko-data-item
                v-model="stdInType"
                itemType="radio"
                :radios="uiState.stdin_list"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="TTY" prop="tty">
              <el-checkbox
                v-model="container.tty"
                :disabled="stdInType === 'No'"
              >
                TTY
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </k-section>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { Container } from "@/views/domain/kubeHud/api/k8s";
import { computed, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import KSection from "@/views/domain/kubeHud/views/components/k-section/index.vue";

const { t } = useI18n();

type Prop = {
  readonly?: boolean;
};
const props = withDefaults(defineProps<Prop>(), {
  readonly: false
});

const container = defineModel<Container>("container", {
  default: {}
});

const uiState = reactive({
  stdin_list: [
    { label: t("business.workload.no"), value: "No" },
    { label: t("business.workload.once"), value: "Once" },
    { label: t("business.workload.yes"), value: "Yes" }
  ]
});

const stdInType = computed({
  get() {
    if (container.value.stdin === false) {
      return "No";
    } else if (container.value.stdin && container.value.stdinOnce) {
      return "Once";
    } else if (container.value.stdin === true) {
      return "Yes";
    } else {
      return undefined;
    }
  },
  set(val: string) {
    onStdinTypeChange(val);
  }
});

const inputCmd = ref("");
const inputArg = ref("");
const onInputCmdChanged = (cmd: string) => {
  container.value.command = cmd.split(",");
};

const onInputArgChanged = (arg: string) => {
  container.value.args = arg.split(",");
};

const onStdinTypeChange = (type: string) => {
  switch (type) {
    case "No":
      container.value.stdin = false;
      break;
    case "Once":
      container.value.stdinOnce = true;
      container.value.stdin = true;
      break;
    case "Yes":
      container.value.stdin = true;
      break;
    default:
      delete container.value.stdin;
      delete container.value.stdinOnce;
      break;
  }
};
</script>
